import { Allotment } from 'allotment' // 分割布局 左右拖拽改变宽度
import 'allotment/dist/style.css'
import './index.scss'

import { DndProvider } from 'react-dnd' // 拖拽插件
import { HTML5Backend } from 'react-dnd-html5-backend'

import Header from './common/header'
import Material from './common/material'
import Setting from './common/setting'
import Stage from './common/stage'
import ProdStage from './common/stage/prod'

import { useLowCodeStore } from './store/lowcode'

function LowCodeHome() {
  const { mode } = useLowCodeStore()

  return (
    <DndProvider backend={HTML5Backend}>
      <div className="low-code-container">
        <div className="low-code-header">
          <Header />
        </div>

        {mode === 'edit' ? (
          <Allotment>
            <Allotment.Pane preferredSize={200} maxSize={400} minSize={200}>
              <Material />
            </Allotment.Pane>
            <Allotment.Pane>
              <Stage />
            </Allotment.Pane>
            <Allotment.Pane preferredSize={300} maxSize={500} minSize={300}>
              <Setting />
            </Allotment.Pane>
          </Allotment>
        ) : (
          <ProdStage />
        )}
      </div>
    </DndProvider>
  )
}

export default LowCodeHome
